<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>网易用户中心</title>

		<link rel="stylesheet" type="text/css" href="__STATIC__/css/style.css" />
		<script src="static/js/jquery-1.11.0.js"></script>

		<script src="static/js/registerPage.js"></script>
		<script>
			$(function() {
				//表单提示
				$('form').validate();
				
				$('input[type=submit]').click(function() {
					$.ajax({
						url: 'site/index/user/checkzc',
						Type: 'POST',
						dataType: 'text',
						data: {
							status: 'register',
							userID: $('input[name=user]').val(),
							password: $('input[name=password]').val()
						},
						success: function(res) {
							//1.注册成功（账号没被注册过》》》后台运算）
							if (res == 0) {
								alert('账号已被注册，请重新注册')
							} else if (res == 2) {
								alert('对不起您的账号与密码不匹配,请重新填写!')

							} else {
								alert('恭喜您成功注册!')
							}
						}

					})
				})
			})
		</script>-->
	</head>
		<!--<script>
			window.onload=function(){
//				alert(1);
				function $(id){
					return document.getElementById(id);
				}
						var regs = {
								userNameReg: /^[a-zA-Z0-9_-]+$/, //字母数字下划线
								mobilereg: /^[1-3]\d{10}$/,
								notnumreg: /\D/

							}
							//第一步：当页面加载完后获取所要操作的节点对象（所有的input）
						var userName = $("userName"); //用户名邮箱
						var pwd = $("pwd"); //设置密码
						var pwd2 = $("pwd2"); //确认密码
						var ck = $("ck");  //选择协议
						var btn = $("btn"); //注册按钮
						/*---------------------------------邮箱验证----------------------------------------*/
						userName.onfocus = userName.onblur = userName.onkeyup = function(e) {
							var _event = window.event || e; //事件对象
							checkUserName(_event);
						}

						function checkUserName(_e) { //true 或  false  _e事件对象
							var type;
							if(_e) {
								type = _e.type;
							}

	var v = userName.value;  //文本框的值
		var box = userName.parentNode; //box节点对象
		var tip = box.nextElementSibling; //提示信息节点容器节点对象
		var span = tip.lastElementChild; //提示信息节点对象
							if(type == "focus") { //onfoucs事件 
								if(v.length == 0) { //如果文本框为空
									box.className = "box";
									tip.className = "tip default"; //改变提示信息节点对象容器的样式
									span.innerHTML = "支持字母、数字、“-”、“_”,4-20个字符";
									return false;
								}
							}
							if(type == "blur") { //onblur
								if(v.length == 0) { //空
									box.className = "box";
									tip.className = "tip hide";
									return false;
								}
							}
							/*其他情况*/
							if(v.length == 0) { //如果文本框为空
								box.className = "box error";
								tip.className = "tip error";
								span.innerHTML = "请输入账户名";
								return false;
							} else { //不为空
								if(regs.userNameReg.test(v)) {
									if(v.length < 4 || v.length > 20) {
										box.className = "box error";
										tip.className = "tip error";
										span.innerHTML = "长度4-20个字符";
									} else {
										box.className = "box right";
										tip.className = "tip hide";

									}
								} else {
									box.className = "box error";
									tip.className = "tip error";
									span.innerHTML = "格式错误，仅支持数字、字母、“-”、“_”";
									return false;
								}

							}

						}
						/*为按钮注册点击事件*/
						btn.onclick=function(){
//									alert(1);
									var box = ck.parentNode; //box节点对象
									var tip = box.nextElementSibling; //提示信息节点容器节点对象
									var span = tip.lastElementChild; //提示信息节点对象
									if(ck.checked) { //同意
										box.className = "box";
										tip.className = "tip hide";
										alert(checkUserName())
											if(
												checkUserName()
											) {
												alert(1000);
															var userName = $("#pwd").val();
														//注册成功之后，把用户名存在本地
														localStorage["userName"] = userName;
														localStorage["pwd"] = userName;
														//session（会话）  后端
														window.location.href = "index.html";
											}
										} else { //不同意
											console.log(3);
											box.className = "box error";
											tip.className = "tip error";
											span.innerHTML = "请同意注册协议111";
										}
									
									//		var userName = $("#userName").val();
								}
								
								
									
		}
		</script>
	-->

	<body>
		<!--网易用户注册界面-->
		<div class="g-doc">
			<!--网易用户注册界面头部-->
			<div class="g-hd">
				<div class="m-logobar">
					<a href="#">
						<img src="__STATIC__/images/zc_logo.png" />
					</a>
					<i>|</i>
					<h2>注册</h2>
				</div>

			</div>
			<!--网易用户注册界面身体-->
			<div class="g-bd">
				<div class="m-tab">
					<div class="tabHd">
						<ul class="f-cbli">
							<li class="z-on">
								<a href="#">邮箱账号注册</a>
							</li>
							<li>
								<a href="#">VIP邮箱注册</a>
							</li>
						</ul>
					</div>
					<div class="tabBdNew">
						<div class="tabBd" style="float: left; height: 590px;">
							<div class="container">
								<!--网易注册模块-->
								<form  style="display:inline;">
								<div class="register">
									<!--用户注册表单项模块-->
									<div class="register-box">
										<!--表单项-->
										<div class="box">
										
											<label for="userName"></label>
											<input type="text" id="userName" placeholder="新邮件地址"  value="anxiangyuan"/>
											<select name="">
												<option value="">@163.com</option>
												<option value="">@126.com</option>
												<option value="">@188.com</option>
												<option value="">@vip163.com</option>
												<option value="">@vip188.com</option>
											</select>
											<i></i>
										</div>
										<!--提示信息-->
										<div class="tip">
											<i></i>
											<span></span>
										</div>
									</div>
									<!--设置密码表单项模块-->
									<div class="register-box">
										<!--表单项-->
										<div class="box">
											<label for="pwd"></label>
											<input type="password" placeholder="设 置 密 码" id="pwd" value="anxiangyuan" />
											<img src="__STATIC__/img/aaa_1.png" />
											<i></i>
										</div>
										<!--提示信息-->
										<div class="tip">
											<i></i>
											<span></span>
										</div>
									</div>
									<!--确认密码表单项模块-->
									<div class="register-box">
										<!--表单项-->
										<div class="box">
											<label for="pwd2"></label>
											<input type="password" placeholder="确 认 密 码" id="pwd2" value="anxiangyuan" />
											<img src="__STATIC__/img/aaa_1.png" />
											<i></i>
										</div>
										<!--提示信息-->
										<div class="tip">
											<i></i>
											<span></span>
										</div>
									</div>
									<!--邮箱验证表单项模块-->
						<div class="register-box">
										<!--表单项-->
										<div class="box">
											<label for="email">
    											<input type="text" placeholder="您的手机号" id="email"  value="15066287408" />
    											<img src="__STATIC__/img/aaa_1.png" />
											</label>
											<i><span></span></i>
										</div>
										<!--提示信息-->
										<div class="tip">
											<i></i>
											<span></span>
										</div>
				</div>

									<!--选择注册协议-->
									<div class="register-box xy">
										<!--表单项-->
										<div class="box">
											<input type="checkbox" id="ck" />
											<span> 我已阅读并同意<a href="#">" 服务条款 " </a>和<a href="#"> " 网络游戏用户隐私权保护和个人信息利用政策 "</a></span>
										</div>
										<!--提示信息-->
										<div class="tip">
											<i></i>
											<span></span>
										</div>
									</div>

									<button id="btn">注册</button>

								</div>
								</form>
							</div>
						</div>

						<div class="tabBdAd" style="float: left; height: 590px;">
							<div style="width:270px; height: 98px; margin-top: 67px;">
								<p class="ad_title">用网易邮箱大师</p>
								<p class="ad_title">管理邮箱更简单</p>
								<p class="ad_lit_title">[自动登录、再也不用记密码]</p>
								<p class="ad_lit_title">[不用费心、所有邮箱自动收发]</p>
							</div>
							<div style="width:200px; height: 257px; margin: 20px auto;">
								<img src="__STATIC__/images/got2.jpg" />
							</div>
							<a href="">&gt;&gt;立即下载</a>
						</div>
					</div>

				</div>

			</div>
			<!--网易用户注册界面脚部-->
			<div class="g-ft">
				<div class="m-cp">
					<p class="p1">
						<a href="#">About NetEase</a>-
						<a href="#">公司简介</a>-
						<a href="#">联系方式</a>-
						<a href="#">OAuth2.0认证</a>-
						<a href="#">招聘信息</a>-
						<a href="#">客户服务</a>-
						<a href="#">相关法律</a>-
						<a href="#">网络营销</a>
					</p>
					<p class="p2">网易公司版权所有 ©1997-2016</p>
				</div>
			</div>
		</div>
	</body>
	<script>
		function yzm() {
			var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

			var str = '';
			for(var i = 0; i < 4; i++)
				str += '' + arr[Math.floor(Math.random() * arr.length)];
			return str;
		}
	function $ (id) {
			return document.getElementById(id);
		}
		/*需要使用的相关正则对象*/
		var regs={
			userName:/^(([\u4e00-\u9fa5])|([0-9a-zA-Z_-]))+$/,
		    Number:/[0-9]{10}/,
		    Word:/[a-zA-Z]/,
	    Email:/^[1-3]\d[0-9]{9}/,//	/^\w+@\w+(\.\w+)+$/,  //邮箱正则
		    Phone:/^[1-3]\d{10}$/    //手机正则
		    
		}
		/*密码等级验证*/
		function pwdLevel (pwd) {
			var level=0;
			var isNumber=true;
			var isWord=true;
			var isTe=true;
			for (var i=0;i<pwd.length;i++) {
				if (regs.Number.test(pwd[i])){
					if (isNumber) {
						level+=1;
						isNumber=false;
					}	
				}else if(regs.Word.test(pwd[i])) {
					if (isWord){
						level+=1;
						isWord=false;
					}
				}else{
					if(isTe==true){
						level+=1;
						isTe=false;
					}	
				} 
			}
			return level;
		}
		/*获取相关节点*/
		var userName=$("userName");  //获取用户名节点;
		var pwd=$("pwd"); //获取密码节点;
		var pwd2=$("pwd2");//获取确认密码节点;
		var email=$("email");//获取邮箱输入节点;
//		var phone=$("phone");//获取手机验证节点;
		var xy=$("ck");  //获取注册协议节点;
		var btn=$("btn");//获取按钮节点;
		/*用户名相关事件*/
		userName.onfocus=userName.onblur=userName.onkeyup=function(e){ 
			var _event=window.event||e;
				checkUserName(_event);
		};
		function checkUserName(e){
			var type;
			if(e){   
				type=e.type; //接收事件类型;
			}
			var box=userName.parentNode;  //获取大box节点对象
			var v=userName.value;  //获取文本内容
			var tip=box.nextElementSibling; //提示框状态
			var span=tip.lastElementChild; //提示文本节点
			if(type=="focus"){  //当事件为聚焦事件时;
				if(v==""){
					box.className="box";
					tip.className="tip";
					span.innerHTML='支持汉字,字母,数字,"_","-"的组合,4-20个字符';
					return false;
				}
			}
			if(type=="blur"){   //当事件为脱离聚焦;
				if(v==""){
					box.className="box";
					tip.className="tip hide";
					return false;
				}
			}
			if(v==""){  //当input为空的时候;
					box.className="box error";
					tip.className="tip error1";
					span.innerHTML='请输入用户名';
					return false;
				}
			if(regs.userName.test(v)){    //格式符合
				if (v.length>20||v.length<4) {  //长度不符
					box.className="box error";
					tip.className="tip error1";
					span.innerHTML='长度只能在4-20个字符之间';
					return false;
					
				} else{         //长度符合    输入完全符合要求;
					box.className="box right";
					tip.className="tip hide";
					return true;
				}
			}else{   //格式不符合
				box.className="box error";
				tip.className="tip error1";
				span.innerHTML='格式错误,只支持汉字,字母,数字,"_","-"的组合';
				return false;
			}
		}
		/*密码输入事件*/
		pwd.onfocus=pwd.onblur=pwd.onkeyup=function(e){ 
			var _event=window.event||e;
				checkPwd(_event);
		};
		function checkPwd(e){
			var type;
			if(e){   
				type=e.type; //接收事件类型;
			}
			var box=pwd.parentNode;  //获取大box节点对象
			var v=pwd.value;  //获取文本内容
			var tip=box.nextElementSibling; //提示框状态
			var span=tip.lastElementChild; //提示文本节点
			if(type=="focus"){  //当事件为聚焦事件时;
				if(v==""){
					box.className="box";
					tip.className="tip";
					span.innerHTML='建议使用字母数字符合两种以上组合';
					return false;
				}
			}
			if(type=="blur"){   //当事件为脱离聚焦;
				if(v==""){
					box.className="box";
					tip.className="tip hide";
					return false;
				}
			}
			if(v==""){  //当input为空的时候;
					box.className="box error";
					tip.className="tip error1";
					span.innerHTML='请输入密码';
					return false;
				}
			/*密码长度*/
			if (v.length>20||v.length<6) {  //长度不符
				box.className="box error";
				tip.className="tip error1";
				span.innerHTML='长度只能在6-20个字符之间';
				return false;
					
			} else{ //长度符合    输入完全符合要求;
				var leve=pwdLevel(v);
				switch (leve){
					case 1:
						box.className="box right";
						tip.className="tip ruo";
						span.innerHTML='密码强度弱，建议使用两种以上的字符组合';
						break;
					case 2:
						box.className="box right";
						tip.className="tip zhong";
						span.innerHTML='密码强度中，建议使用三种以上的字符组合';
						break;
					case 3:
						box.className="box right";
						tip.className="tip qiang";
						span.innerHTML='密码强度强，您的密码很安全';
						break;
				}
				return true;
			}
			
		}
		/*密码确认事件*/
		pwd2.onfocus=pwd2.onblur=pwd2.onkeyup=function(e){ 
			var _event=window.event||e;
				checkPwd2(_event);
		};
		function checkPwd2(e){
			var type;
			if(e){   
				type=e.type; //接收事件类型;
			}
			var box=pwd2.parentNode;  //获取大box节点对象
			var v=pwd2.value;  //获取文本内容
			var tip=box.nextElementSibling; //提示框状态
			var span=tip.lastElementChild; //提示文本节点
			if(type=="focus"){  //当事件为聚焦事件时;
				if(v==""){
					box.className="box";
					tip.className="tip";
					span.innerHTML='请再次输入密码';
					return false;
				}
			}
			if(type=="blur"){   //当事件为脱离聚焦;
				if(v==""){
					box.className="box";
					tip.className="tip hide";
					return false;
				}
			}
			if(v==""){  //当input为空的时候;
					box.className="box error";
					tip.className="tip error1";
					span.innerHTML='请再次输入密码';
					return false;
				}
			/*密码验证*/
			if (v==pwd.value) {  //两次密码一致
				box.className="box right";
				tip.className="tip hide";
				return true;
					
			} else{ //俩次密码不一致	
				box.className="box error";
				tip.className="tip error1";
				span.innerHTML='两次密码不一致';
				return false;
			}
			
		}
		/*手机输入事件*/
		email.onfocus=email.onblur=email.onkeyup=function(e){ 
			var _event=window.event||e;
				checkEmail(_event);
		}
		function checkEmail(e){
			var type;
			if(e){   
				type=e.type; //接收事件类型;
			}
			var box=email.parentNode;  //获取大box节点对象
			var v=email.value;  //获取文本内容
//			console.log(box);
			var tip=box.nextElementSibling; //提示框状态
//			console.log(tip);
			var span=tip.lastElementChild; //提示文本节点
			if(type=="focus"){  //当事件为聚焦事件时;
				if(v==""){
					box.className="box";
					tip.className="tip";
//					alert(span);
					span.innerHTML='完成验证后你可以用该邮箱登录和找回密码';
					return false;
				}
			}
			if(type=="blur"){   //当事件为脱离聚焦;
				if(v==""){
					box.className="box";
					tip.className="tip hide";
					return false;
				}
			}
			if(v==""){  //当input为空的时候;
					box.className="box error";
					tip.className="tip error1";
					span.innerHTML='请输入邮箱';
					return false;
				}
			/*密码验证*/
			if (regs.Email.test(v)) {  //符合邮箱正则
				box.className="box right";
				tip.className="tip hide";
				return true;
					
			} else{ //不符合
				box.className="box error";
				tip.className="tip error1";
				span.innerHTML='格式错误';
				return false;
			}
		}
//		/*手机输入事件*/
//		phone.onfocus=phone.onblur=phone.onkeyup=function(e){ 
//			var _event=window.event||e;
//				checkPhone(_event);
//		}
//		function checkPhone(e){
//			var type;
//			if(e){   
//				type=e.type; //接收事件类型;
//			}
////			var box=phone.parentNode;  //获取大box节点对象
//			var v=phone.value;  //获取文本内容
//			var tip=box.nextElementSibling; //提示框状态
//			var span=tip.lastElementChild; //提示文本节点
//			if(type=="focus"){  //当事件为聚焦事件时;
//				if(v==""){
//					box.className="box";
//					tip.className="tip";
//					span.innerHTML='完成手机验证后你可以用该手机登录和找回密码';
//					return false;
//				}
//			}
//			if(type=="blur"){   //当事件为脱离聚焦;
//				if(v==""){
//					box.className="box";
//					tip.className="tip hide";
//					return false;
//				}
//			}
//			if(v==""){  //当input为空的时候;
//					box.className="box error";
//					tip.className="tip error1";
//					span.innerHTML='请输入手机号码';
//					return false;
//				}
			/*手机验证*/
//			if (regs.Phone.test(v)) {  //符合手机正则
//				box.className="box right";
//				tip.className="tip hide";
//				return true;
//						
//			} else{ //不符合
//				box.className="box error";
//				tip.className="tip error1";
//				span.innerHTML='格式错误';
//				return false;
//			}
//		}	
	
		/*点击事件*/
		btn.onclick=function(){
			
			if(xy.checked){   //同意注册协议
				
				xy.parentNode.className="box xy";
				xy.parentNode.nextElementSibling.className="tip hide";
				if(
					checkUserName()&&
					checkPwd()&&
					checkPwd2()&&
					checkEmail()
//					&&
//					checkPhone()
				){															
					var pwd1 =pwd.value;
					var userName1 =userName.value;
//					alert(userName);//注册成功之后，把用户名存在本地
					localStorage["userName"] = userName1;
					localStorage["pwd"] = pwd1;	
					localStorage["zc"] = false;//session（会话）  后端
					window.location.href = "denglu.html";
				}
			}else{      //不同意注册协议
				xy.parentNode.className="error2";     //警告框
				xy.parentNode.nextElementSibling.className="tip error1";
				xy.parentNode.nextElementSibling.lastElementChild.innerHTML="请同意注册协议";
			}
		}		
	</script>
</html>